<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
const props:any = defineProps({
  file: {
    required: true
  }
})

const url = computed(() => URL.createObjectURL(props.file))
//  获取html 文件内容
async function getHtmlContent(file) {
  const reader = new FileReader();
  reader.readAsText(file);
  return new Promise((resolve, reject) => {
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = (error) => {
      reject(error)
    }
  })
}
const htmlContent = ref('')
onMounted(() => {
  getHtmlContent(props.file)
  .then(res => {
    console.log('res', res)
    let html = res.toString()
    // html = html.replace(/<script[\s\S]*<\/script>/g, '')
    // html = html.replace(/<style[\s\S]*<\/style>/g, '')
    // html = html.replace(/<link[\s\S]*<\/link>/g, '')
    // html = html.replace(/<img[\s\S]*<\/img>/g, '')
    console.log('html', html)
    htmlContent.value = html
  })
})
</script>
<template>
  <a-tabs default-active-key="2">
    <a-tab-pane key="1" title="Table">
      <iframe  class="iframe-container"
        border="0" frameborder="no" framespacing="0"
        allowfullscreen="true"
        :src="url">
      </iframe>
    </a-tab-pane>
    <a-tab-pane key="2" title="html 源码">
      <!-- <Markdown :source="htmlContent"></Markdown> -->
      <pre>
        <code class="language-html line-numbers language-css">
          {{ htmlContent }}
        </code>
      </pre>
    </a-tab-pane>
  </a-tabs>
</template>


<style lang="scss">

.arco-tabs {
  height: 100%;
  width: 100%;
  .arco-tabs-content {
    height: calc(100% - 40px);
  }
  .arco-tabs-content .arco-tabs-content-list {
    height: 100%;
  }
  .arco-tabs-pane {
    height: 100%;
    overflow: auto;
  }
}
.iframe-container {
  min-height: 100%;
  min-width: 100%;
}
</style>
